<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频详情 - 排球队</title>
    <link rel="stylesheet" href="../../../css/style.css">
    <style>
        .video-container {
            max-width: 1000px;
            margin: 40px auto;
            padding: 0 20px;
        }
        
        .video-player {
            width: 100%;
            background: #000;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .video-player video {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .video-info {
            background: white;
            padding: 30px;
            border-radius: 10px;
            margin-top: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .video-title {
            font-size: 2rem;
            color: #333;
            margin-bottom: 15px;
        }
        
        .video-meta {
            color: #666;
            margin-bottom: 20px;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .video-description {
            line-height: 1.8;
            color: #555;
            margin-bottom: 30px;
        }
        
        .comments-section {
            background: white;
            padding: 30px;
            border-radius: 10px;
            margin-top: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .comment-form {
            margin-bottom: 30px;
        }
        
        .comment-form textarea {
            width: 100%;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            resize: vertical;
            min-height: 100px;
            font-family: inherit;
        }
        
        .comment-form button {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            cursor: pointer;
            margin-top: 10px;
        }
        
        .comment-form button:hover {
            background: #5a6fd8;
        }
        
        .comment {
            border-bottom: 1px solid #eee;
            padding: 20px 0;
        }
        
        .comment:last-child {
            border-bottom: none;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .comment-author {
            font-weight: bold;
            color: #333;
        }
        
        .comment-date {
            color: #999;
            font-size: 0.9rem;
        }
        
        .comment-content {
            color: #555;
            line-height: 1.6;
        }
        
        .back-button {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 12px 25px;
            text-decoration: none;
            border-radius: 8px;
            margin-bottom: 20px;
            transition: background 0.3s ease;
        }
        
        .back-button:hover {
            background: #5a6fd8;
        }
    </style>
</head>
<body>
    <header>
        <nav class="navbar">
            <div class="nav-container">
                <div class="nav-logo">
                    <h2>排球队管理系统</h2>
                </div>
                <ul class="nav-menu">
                    <li><a href="../index/index.html">首页</a></li>
                    <li><a href="../about/about.html">球队介绍</a></li>
                    <li><a href="../players/list.html">队员信息</a></li>
                    <li><a href="../matches/matches.html">比赛管理</a></li>
                    <li><a href="../training/training.html">训练安排</a></li>
                    <li><a href="../knowledge/index.html">排球知识</a></li>
                </ul>
            </div>
        </nav>
    </header>

    <main>
        <div class="video-container">
            <a href="../index/index.html" class="back-button">← 返回首页</a>
            
            <!-- 视频播放器 -->
            <div class="video-player">
                <video controls poster="https://via.placeholder.com/1000x600/667eea/ffffff?text=视频封面">
                    <source src="#" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
            
            <!-- 视频信息 -->
            <div class="video-info">
                <h1 class="video-title">2024年春季联赛精彩集锦</h1>
                <div class="video-meta">
                    <span>发布时间: 2024年1月15日</span>
                    <span>时长: 15:30</span>
                    <span>观看次数: 1,234</span>
                    <span>分类: 比赛集锦</span>
                </div>
                <div class="video-description">
                    <p>这是我们在2024年春季联赛中的精彩表现集锦。视频包含了多场关键比赛中的精彩瞬间，展现了我们球队的技术水平和团队精神。</p>
                    <p>主要亮点包括：</p>
                    <ul>
                        <li>主攻手的强力扣杀</li>
                        <li>二传手的精准传球</li>
                        <li>自由人的精彩救球</li>
                        <li>团队配合的默契表现</li>
                    </ul>
                    <p>感谢所有队员的辛勤付出，也感谢教练组的精心指导。我们将继续努力，在未来的比赛中取得更好的成绩！</p>
                </div>
            </div>
            
            <!-- 评论区 -->
            <div class="comments-section">
                <h3>评论区</h3>
                
                <div class="comment-form">
                    <textarea placeholder="写下你的评论..."></textarea>
                    <button onclick="addComment()">发表评论</button>
                </div>
                
                <div id="comments-list">
                    <div class="comment">
                        <div class="comment-header">
                            <span class="comment-author">李教练</span>
                            <span class="comment-date">2024年1月16日</span>
                        </div>
                        <div class="comment-content">
                            这场比赛大家表现得很棒！特别是第三局的配合，体现了我们平时训练的效果。继续保持这种状态！
                        </div>
                    </div>
                    
                    <div class="comment">
                        <div class="comment-header">
                            <span class="comment-author">王队长</span>
                            <span class="comment-date">2024年1月15日</span>
                        </div>
                        <div class="comment-content">
                            感谢所有队员的努力！这场比赛我们打出了团队精神，每个人都在为胜利而奋斗。期待下一场比赛！
                        </div>
                    </div>
                    
                    <div class="comment">
                        <div class="comment-header">
                            <span class="comment-author">张队员</span>
                            <span class="comment-date">2024年1月15日</span>
                        </div>
                        <div class="comment-content">
                            看到自己在视频中的表现，感觉很有成就感。感谢教练的指导，我会继续努力提升技术！
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="footer-content">
            <p>&copy; 2024 排球队管理系统. 保留所有权利.</p>
        </div>
    </footer>

    <script>
        function addComment() {
            const textarea = document.querySelector('.comment-form textarea');
            const comment = textarea.value.trim();
            
            if (!comment) {
                alert('请输入评论内容');
                return;
            }
            
            const commentsList = document.getElementById('comments-list');
            const newComment = document.createElement('div');
            newComment.className = 'comment';
            
            const now = new Date();
            const dateStr = now.getFullYear() + '年' + (now.getMonth() + 1) + '月' + now.getDate() + '日';
            
            newComment.innerHTML = `
                <div class="comment-header">
                    <span class="comment-author">访客用户</span>
                    <span class="comment-date">${dateStr}</span>
                </div>
                <div class="comment-content">
                    ${comment}
                </div>
            `;
            
            commentsList.insertBefore(newComment, commentsList.firstChild);
            textarea.value = '';
            
            alert('评论发表成功！');
        }
    </script>
</body>
</html> 